@page "/Toolbar"

@using FluentUI.Demo.Shared.Pages.Toolbar.Examples

<h1>Toolbar</h1>

<p>As defined by the <a href="https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/" target="_blank" rel="noopener noreferrer">W3C</a>:</p>
<blockquote>
    <p>
        A toolbar is a container for grouping a set of controls, such as buttons, menubuttons, or checkboxes.
    </p>
    <p>
        When a set of controls is visually presented as a group, the toolbar role can be used to communicate the presence and
        purpose of the grouping to screen reader users. Grouping controls into toolbars can also be an effective way of reducing
        the number of tab stops in the keyboard interface.
    </p>
</blockquote>
<p>
    <code>&lt;FluentToolbar&gt;</code> wraps the <code>&lt;fluent-toolbar&gt;</code> element, a web component implementation of a toolbar leveraging the
    Fluent UI design system.
</p>

<h2 id="example">Examples</h2>

<DemoSection Title="Light and dark mode" Component="@typeof(ToolbarDefault)"></DemoSection>

<DemoSection Title="Slotted end items with minimal width" Component="@typeof(ToolbarSlotted)"></DemoSection>

<DemoSection Title="Different kinds of labels" Component="@typeof(ToolbarLabels)"></DemoSection>

<DemoSection Title="Vertical orientation" Component="@typeof(ToolbarVertical)"></DemoSection>

<DemoSection Title="Disabled elements" Component="@typeof(ToolbarDisabledElements)"></DemoSection>

<DemoSection Title="RTL mode" Component="@typeof(ToolbarRTL)"></DemoSection>

<DemoSection Title="Start and End slots" Component="@typeof(ToolbarStartEndSlots)"></DemoSection>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentToolbar)" />
